<template>
  <div class="qingzhi-kang-box">
    <page-reload v-show="state.loadErr" @needReload="getEmotions"></page-reload>
    <template v-if="!state.loadErr">
      <div class="yuanze-s" v-if="state.emotionalPrescription.emotionalPrescriptionPrinciple">
        <div class="y-title">情志原则</div>
        <div class="y-desc" v-html="state.emotionalPrescription.emotionalPrescriptionPrinciple"></div>
      </div>
      <div class="foodCard" v-if="state.emotionalPrescription.emotionalPrescriptionDetailPrinciple">
        <div class="title">调理细则</div>
        <div class="s-li" :class="{'marB12':k==state.emotionalPrescription.emotionalPrescriptionDetailPrinciple.length-1}"
             v-for="(item, k) in state.emotionalPrescription.emotionalPrescriptionDetailPrinciple"
             :key="`base_demand${k}`">{{item}}</div>
      </div>
      <div class="foodCard">
        <div class="title">{{state.emotionalPrescription.emotionalPrescriptionShowName}}</div>
        <div class="jl-li">
          <span class="jl-name">组方构成</span>
          <span class="jl-text">{{state.emotionalPrescription.emotionalPrescriptionComponentcomposition}}</span>
        </div>
        <div class="jl-li">
          <span class="jl-name">使用说明</span>
          <span class="jl-text">{{state.emotionalPrescription.emotionalPrescriptionInstructions}}</span>
        </div>
        <div class="jl-li">
          <span class="jl-name">使用场合</span>
          <span class="jl-text">{{state.emotionalPrescription.emotionalPrescriptionUseoccasion}}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch, toRefs } from 'vue';
import { useRoute } from 'vue-router';
import { Toast } from 'vant';
import {http} from "@/axios/http";
import * as API from "@/axios/api";
import utils from '@/utils/utils.ts';
import PageReload from '@/components/pageReload.vue';

const route = useRoute();
let state = reactive({
  emotionalPrescription: {},
  loadErr: false
})

let props = defineProps<{
  doLoad: boolean
}>()
let emit = defineEmits(['loadFaild'])
let { doLoad } = toRefs(props);

watch(doLoad, (newVal, oldVal) => {
  if (newVal) {
    getEmotions()
  }
})

let getAssetImg = (src) => {
  return new URL(src, import.meta.url).href
}

let getEmotions = () => {
  Toast.loading({
    mask: false,
    message: '',
    duration: 0
  })
  http({
    baseUrl: API.baseUrl,
    url: API.emotionalPrescription,
    method: 'GET',
    params: {
      userId: route.query.userId
    }
  },(res) =>{
    Toast.clear()
    state.loadErr = false
    if (res && res.data && res.data.code === 200){
      let data = res.data.data
      if (data?.emotionalPrescription) {
        data.emotionalPrescription.emotionalPrescriptionDetailPrinciple = data?.emotionalPrescription?.emotionalPrescriptionDetailPrinciple.split('\n')??[]
        state.emotionalPrescription = data.emotionalPrescription
      }
    } else {
      emit('loadFaild', 2)
      utils.toastMsg(res, state, API.emotionalPrescription)
    }
  })
}

</script>

<style scoped lang="scss">
.qingzhi-kang-box{
  .yuanze-s{
    background-image: url("../../../assets/images/report/qingzhi-kang.png");
  }
}
</style>
